.support-nav-wrap {
    z-index: $zindex-dropdown;
    width: 100%;
    padding-left: $main-menu-width + 30px;
    padding-right: 30px;
    padding-top: 10px;

    &.iframe-mode {
        padding-left: 30px;
    }

    @include media-breakpoint-down(md) {
        padding-left: 30px;
    }

    @include media-breakpoint-down(xs) {
        position: inherit;
        padding-left: 15px;
        padding-right: 15px;
    }
}

body {
    &.popup {
        .support-nav-wrap {
            padding-top: 10px;
            top: 0;
        }
    }

    &.auth {
        .support-nav-wrap {
            display:none;
        }
    }
}

.support-nav {
    padding: 2em 0;

    .breadcrumbs {
        list-style: none;
        padding: 0;
        margin-bottom: 15px;
        font-size: 0.8rem;
        width: 100%;
        font-weight: normal;
        color: $text-color;

        @include media-breakpoint-up(md) {
            margin-top: -10px;
        }

        > li {
            display: inline-block;
            vertical-align: middle;

            &:after {
                content: "\2f"; // "slash"
                padding: 0 5px;
            }

            &:last-child {
                max-width: 16rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: middle;

                &:after {
                    display: none;
                }
            }
        }
        a {
            color: $text-color;

            &:hover,
            &:focus {
                color: $primary;
            }
        }
    }

    .flex-wrapper {
        display: flex;
        justify-content: space-between;

        @include media-breakpoint-down(xs) {
            flex-direction: column;
        }
    }

    .main-header {
        margin: 0;

        @include media-breakpoint-up(md) {
            flex: 0 1 auto;
            margin-top: 4px;
        }

        small {
            color: lighten($text-color, 20%);
        }
    }

    .page-actions {
        &:empty {
            display: none;
        }

        @include media-breakpoint-up(lg) {
            border: 0;
            margin-top: 0;
            padding-top: 0;
            padding-left: 40px;
            flex: 1 0 auto;
        }

        .btn-toolbar {
            display: flex;
            flex-direction: row-reverse;

            @include media-breakpoint-down(xs) {
                flex-direction: column;
            }

            .btn-danger {
                order: 1;
            }
        }

        .btn {
            margin: 10px 10px 0 0;

            i {
                margin-right: 5px;
            }

            @include media-breakpoint-up(md) {
                margin: 0 0 0 10px;
            }

            @include media-breakpoint-down(xs) {
                margin: 10px 0 0 0;

                &:not(.dropdown-toggle) {
                    width: 100%;
                }

                &.btn-actions {
                    width: 100%;
                }
            }
        }

        .btn-group {
            margin: 10px 10px 0 0;

            @include media-breakpoint-up(md) {
                margin: 0 0 0 10px;
            }

            @include media-breakpoint-down(xs) {
                margin: 10px 0 0 0;
            }

            &.opaque {
                background-color: darken($success, 5%);
                position: fixed;
                bottom: 10px;
                right: 20px;
                z-index: $zindex-fixed;

                .btn-success {
                    color: $white;
                }
            }

            .btn {
                margin: 0;

                &.dropdown-toggle i {
                    &:last-child {
                        margin-right: 0;
                        margin-left: 5px;
                    }

                    &.fa-chevron-down {
                        font-size: 1.2rem;
                    }
                }
            }

            .btn + .dropdown-toggle i {
                margin: 0;
                font-size: 1.2rem;
                padding: 0px 1px;

                &:last-child {
                    margin-left: 0;
                }
            }
        }

        .dropdown-menu {
            button {
                width: 100%;
                text-align: left;
                border: 0;
                cursor: pointer;
            }

            i {
                margin-right: 6px;
                text-align: center;
            }
        }
    }
}

.shuup-details {
    .support-nav {
        margin: 0 auto;
        min-width: 0;
    }
}
